<template>
  <div>
    <!-- 模态框 -->
    <el-dialog title="新增商品分类" :visible.sync="isShow.sta">
      <el-form :model="form">
        <el-form-item label="上级分类">
          <el-select v-model="form.pid" placeholder="请选择商品区域">
            <el-option label="一级分类" :value="0"></el-option>
            <el-option
              :label="points.catename"
              :value="points.id"
              v-for="points in points_list"
              :key="points.id"
            ></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="分类名称">
          <el-input v-model="form.catename" style="width: 80%"></el-input>
        </el-form-item>
        <!-- 上传图片的模态框 -->
        <el-form-item label="分类图片" v-if="form.pid != 0">
          <template>
            <el-upload
              class="avatar-uploader"
              action=""
              :on-change="handleAvatarChange"
              :before-upload="beforeAvatarUpload"
              style="padding-left: 68px"
            >
              <img v-if="imageUrl" :src="imageUrl" class="avatar" />
              <i v-else class="el-icon-plus avatar-uploader-icon"></i>
            </el-upload>
          </template>
        </el-form-item>
        <!-- 上传图片的模态框 -->
        <el-form-item label="分类状态">
          <el-radio-group v-model="form.status">
            <el-radio :label="1">正常</el-radio>
            <el-radio :label="0">禁用</el-radio>
          </el-radio-group>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="quxiao">取 消</el-button>
        <el-button type="primary" @click="submit">确 定</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import { mapActions, mapState } from "vuex";
export default {
  props: ["isShow"],
  data() {
    return {
      form: {
        id: 0,
        catename: "",
        status: 1,
        pid: 0,
        img: "",
      },

      imageUrl: "",
    };
  },
  methods: {
    quxiao() {
      this.form = {
        id: 0,
        catename: "",
        status: 1,
        pid: 0,
        img: "",
      };
      this.imageUrl=""
    },
    xiugaiadd(obj) {
      console.log(obj);
      this.form.id = obj.id;
      this.form.catename = obj.catename;
      this.form.status = obj.status;
      this.imageUrl = this.lujing + obj.img;
      this.form.pid = obj.pid;
      this.form.img = obj.img
    },
    qingkong() {
      this.form = {
        id: 0,
        catename: "",
        status: 1,
        pid: 0,
        img: "",
      };
      this.imageUrl=""
      this.isShow.sta = false;
    },
    submit() {
      //   console.log(this.form,'5555555555555555555555');
      //  console.log(this.imageUrl,'6666666666666666666');
      var setDate = new FormData();
      setDate.append("pid", this.form.pid);
      setDate.append("catename", this.form.catename);
      setDate.append("status", this.form.status);
      setDate.append("img", this.form.img);

      let url = "/api/cateadd";
      if (this.form.id != 0) {
        url = "/api/cateedit";
        setDate.append("id", this.form.id);
      }
      this.$http.post(url, setDate).then((res) => {
        if (res.code == 200) {
          this.qingkong();
          // 子传父 刷新数据
          this.$emit("addpointss");
        }
      });
    },
    handleAvatarChange(file) {
      //   console.log(arguments);
      this.imageUrl = URL.createObjectURL(file.raw);
      this.form.img = file.raw;
    },
    beforeAvatarUpload(file) {
      const isJPG = file.type === "image/jpeg";
      const isLt2M = file.size / 1024 / 1024 < 2;

      if (!isJPG) {
        this.$message.error("上传头像图片只能是 JPG 格式!");
      }
      if (!isLt2M) {
        this.$message.error("上传头像图片大小不能超过 2MB!");
      }
      return isJPG && isLt2M;
    },

    ...mapActions("PointsStore", ["PointsActions"]),
  },
  computed: {
    ...mapState({ points_list: (state) => state.PointsStore.points_list }),
  },
  created() {
    this.PointsActions();
  },
};
</script>

<style>
.avatar-uploader .el-upload {
  border: 1px dashed #d9d9d9;
  border-radius: 6px;
  cursor: pointer;
  position: relative;
  overflow: hidden;
}
.avatar-uploader .el-upload:hover {
  border-color: #409eff;
}
.avatar-uploader-icon {
  font-size: 28px;
  color: #8c939d;
  width: 178px;
  height: 178px;
  line-height: 178px;
  text-align: center;
}
.avatar {
  width: 178px;
  height: 178px;
  display: block;
}
</style>